<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div id="app">
        <template>
            <h1 style="text-align: center;">角色维护</h1>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="id" width="180">
                </el-table-column>
                <el-table-column prop="rolename" label="角色名称" width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot="header" slot-scope="scope">
                        <!-- 新增菜单按钮 -->
                        <el-button type="primary" @click="handleAddmenu(scope.$index, scope.row)">新增</el-button>
                    </template>
                    <template slot-scope="scope">
                        <!-- 编辑按钮，点击后调用 handleEdit 方法 -->
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!-- 新增下级菜单按钮，点击后调用 handleadd 方法 -->
                        <el-button size="mini" type="primary"
                            @click="handleadd(scope.$index, scope.row)">角色菜单</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-drawer :title="title" :visible.sync="drawer" :with-header="true">
            &nbsp;
            <el-button type="primary" @click="handleupdmenu">确定修改角色菜单</el-button>
            <el-tree ref="tree" :data="menus" show-checkbox default-expand-all node-key="id" ref="tree"
                highlight-current>
            </el-tree>
        </el-drawer>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="role">
                <el-form-item label="角色名称">
                    <el-input v-model="role.rolename" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,
            tableData: [],
            drawer: false,//控制角色菜单
            menus: [],
            roleid: 0,
            role: {
                id: 0,
                rolename: ""
            },
            //标题
            title: ""
        },
        methods: {
            initTreeData() {
                axios.get(API + "getAllRole").then(res => {
                    console.log(res);
                    this.tableData = res.data.data.roles
                })
                axios.get(API + 'selectallmenu?menuname=undefined').then(res => {
                    console.log(res);
                    this.menus = arrayToTree(res.data.data.menus);
                    console.log("分配",this.menus);
                    
                })
            },
            handleAddmenu(index, row) {
                this.title = '添加角色'
                //清空对象中字段的值
                this.role={
                    id:'',
                    rolename:''
                }
                
                this.dialogFormVisible = true
            },
            handleEdit(index, row) {
                this.title = '修改角色'
                this.role=row
                this.dialogFormVisible = true
            },
            add() {
                if (this.role.id != 0) {//判断id为0则添加，否则修改
                    axios.post(API + "updateRole",this.role).then(res => {
                        if (res.data.data.b) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogFormVisible = false
                            this.$nextTick(() => {
                                this.initTreeData()
                            })
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    })
                } else {
                    axios.post(API + 'addRole', this.role).then(res => {
                        if (res.data.data.b) {
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            this.$nextTick(() => {
                                this.initTreeData()
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '添加失败!'
                            });
                        }
                    })
                }
                this.dialogFormVisible = false
            },
            // trchange(a,b){
            //     let treeNowArr=this.$refs.tree.getCheckedKeys();//获取树当前选中节点
            //     treeNowArr.push(a.parentid);//把当前节点的父节点id加入到树
            //     this.$refs.tree.setCheckedKeys(treeNowArr);
            //     console.log(treeNowArr);
            //     console.log(a);
            //     const childIdArr=a.children.map((obj)=>obj.id)//获取当前节点的子节点id
            //     treeNowArr.remove(childIdArr);
            //     this.$refs.tree.setCheckedKeys(treeNowArr);
            //     console.log(childIdArr);
            // },
            handleadd(index, row) {
                this.roleid = row.id;
                console.log(row.id);
                //根据角色id获取菜单集合
                axios.get(API + "selectmenuIdByRoleId?roleId=" + row.id).then(res => {
                    console.log("id",res);
                    let slist = res.data.data.roleId
                    console.log(slist);
                    let arr = slist.map((obj) => obj.menuid)
                    this.$refs.tree.setCheckedKeys(arr);
                })
                this.drawer = true
            },
            handleupdmenu() {
                let treeNowArr = this.$refs.tree.getCheckedKeys();//获取树当前选中节点
                console.log(treeNowArr);
                axios.post(API + "updateMenuIdByRoleId", { roleid: this.roleid, listMenu: treeNowArr }).then(res => {
                    console.log(res);
                    if (res.data.data.boo) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        //异步刷新菜单
                        this.$nextTick(() => {
                            this.initTreeData()
                        })
                        this.drawer = false
                    } else {
                        this.$message.error('修改失败');
                    }
                })
            }
        },
        mounted() {
            this.initTreeData(); // 初始化获取树的数据

        }
    })
</script>

</html>